<script lang="ts" setup>
import {markRaw, nextTick, onBeforeUpdate,   reactive, ref} from "vue";
import * as echarts from 'echarts';

const elementChart1 = ref()
const props = defineProps({
  info1: Object,
})
const state = reactive({
  myCharts: [] as any,
  chartData: {
    element1: null as any,
    element2: null as any,
    element3: null as any,
  }
})

const initChart1 = () => {
  state.chartData.element1 = markRaw(echarts.init(elementChart1.value));
  var data = [{
    "name": "1",
    "value": 10
  }, {
    "name": "2",
    "value": 10
  }]

  const option = {
    color: ['#2196F3', '#69FFE3', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', "rgba(250,250,250,0.3)"],
    backgroundColor: '#FF000000',
    title: {
      text: props.info1?.total,
      subtext: '重点产业链',
      textStyle: {
        color: '#FFFFFF',
        fontSize: 20,
        // align: 'center'
      },
      subtextStyle: {
        fontSize: 14,
        color: ['#7894a7']
      },
      itemGap: 20, //主副标题间距
      x: 'center',
      y: '34%',
    },
    grid: {
      bottom: 150,
      left: 100,
      right: '10%'
    },
    series: [
      // 主要展示层的
      {
        radius: ['60%', '81%'],
        center: ['50%', '50%'],
        type: 'pie',
        label: {
          normal: {
            show: false,
            formatter: "{c}%",
            textStyle: {
              fontSize: 30,
            },
            position: 'outside'
          },
          emphasis: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false,
            length: 30,
            length2: 55
          },
          emphasis: {
            show: false
          }
        },
        name: "民警训练总量",
        data: data,

      },
      // 边框的设置
      {
        radius: ['60%', '65%'],
        center: ['50%', '50%'],
        type: 'pie',
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        animation: false,
        tooltip: {
          show: false
        },
        data: [{
          value: 0,
          itemStyle: {
            color: "rgba(250,250,250,0.3)",
          },
        }],
      }, {
        name: '外边框',
        type: 'pie',
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ['50%', '50%'],
        radius: ['88%', '88%'],
        label: {
          normal: {
            show: false
          }
        },
        data: [{
          value: 9,
          name: '',
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#0b5263'
            }
          }
        }]
      },
    ]
  };
  state.chartData.element1.setOption(option);
  state.myCharts.push(state.chartData.element1);
}

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      setTimeout(() => {
        state.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener('resize', initEchartsResizeFun);
};

onBeforeUpdate(() => {
  initEchartsResize()
  initChart1();
})


</script>


<template>
  <div style="width: 100%;height: 100%;padding: 2px;box-sizing: border-box;">
    <div class="title">重点产业链情况</div>
    <div class="body">
      <div class="left" ref="elementChart1"/>
      <div class="right">
        <el-progress :percentage="20" color="#69FFE3" :show-text="false" />
        <div style="color:#69ffe4b1">引进重大项目和高能级项目<span>&nbsp;&nbsp;{{props.info1?.value1[0]}}个</span></div>
        <div style="color:#69ffe4b1">总投资<span>&nbsp;&nbsp;{{props.info1?.value1[1]}}亿元</span></div>
        <el-progress :percentage="20" color="#2196F3" :show-text="false" />
        <div style="color:#2195f39b">主企业投资项目<span>&nbsp;&nbsp;{{props.info1?.value2[0]}}个</span></div>
        <div style="color:#2195f39b">总投资<span>&nbsp;&nbsp;{{props.info1?.value2[1]}}亿元</span></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.title {
  border-left: 4px solid #32ffc7;
  font-size: 18px;
  color: #fff;
  padding-left: 8px;
  height: 18px;
  line-height: 18px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.body {
  display: flex;
  width: 100%;
  height: calc(100% - 18px - 16px);

  .left {
    flex: 4;
    height: 100%;
  }

  .right {
    flex: 7;
    padding: 0 20px;
    width: calc(100% - 40px);
    font-size: 18px;

    > div {
      color: #13788d;
      padding: 10px;

      > span {
        color: white;
        float: right;
      }
    }
  }
}
</style>